<template>
    <div class="shrinkMenu">
        <template v-for="(item, index) in menuList">
            <div  :key="index">
                <Dropdown transfer  placement="right-start" :key="index" @on-click="changeMenu">
                    <div class="shrinkMenu_icon" type="text">
                        <div>
                            <Icon :type="item.icon" size="20"/>
                        </div>
                    </div>
                    <DropdownMenu style="width: 200px;" slot="list">
                        <template v-for="(child, i) in item.children">
                            <DropdownItem :name="child.name" :key="i"><Icon :type="child.icon"></Icon><span style="padding-left:10px;">{{ itemTitle(child) }}</span></DropdownItem>
                        </template>
                    </DropdownMenu>
                </Dropdown>
            </div>
        </template>
    </div>
</template>

<script>
export default {
    name: 'sidebarMenuShrink',
    props: {
        menuList: {
            type: Array
        },
        iconColor: {
            type: String,
            default: 'white'
        },
    },
    methods: {
        changeMenu (name) {
            console.log(name)
            let nowIndex = 0 
            let menuName = this.menuList.map(item => {
                    return item.name
            })
            for (var i = 0 ; i < this.menuList.length ; i++) {
                let menuPath = this.menuList[i].children.map(item => {
                    return item.name
                })
                if(menuPath.indexOf(name) != -1){
                    nowIndex = i
                    this.childEnter = menuPath.indexOf(name)
                }
            }
            this.menuPath = menuName.indexOf(this.menuList[nowIndex].name) 
            this.$store.commit('increateTag', this.menuList[this.menuPath].children[this.childEnter])
            this.activeName = name
            this.$router.push({
                name: name
            })
        },
        itemTitle (item) {
            if (typeof item.title === 'object') {
                return this.$t(item.title.i18n);
            } else {
                return item.title;
            }
        }
    }
};
</script>
